import styled from "styled-components";

export const DragWrap = styled.div`
  width: 480px;
  height: 202px;
  box-shadow: 0 5px 16px rgb(0 0 0 / 80%);
  border: none;
  position: absolute;
  top: ${(props) => props.ptop + "px"};
  left: ${(props) => props.pleft + "px"};
  z-index: 10;
  display: none;

  .tips {
    position: relative;
    .tipsBox {
      border-bottom: 1px solid #191919;
      border-radius: 4px 4px 0 0;
      cursor: move;
      background: #2d2d2d;
      padding-right: 45px;
      margin: 0;
      height: 38px;
      line-height: 38px;
      padding-left: 18px;
      border-radius: 3px 3px 0 0;
      font-weight: bold;
      font-size: 14px;
      color: #fff;
      background-position: 50% 0;
      .closeBtn {
        position: absolute;
        z-index: 20;
        top: 16px;
        right: 20px;
        width: 10px;
        height: 10px;
        overflow: hidden;
        text-indent: -9999px;
        cursor: pointer;
        background: url(${require("@/assets/img/layer.png").default}) no-repeat
          0 9999px;
        background-position: 0 -95px;
      }
    }
    .tips-text {
      display: inline-block;
      width: 100%;
      height: 164px;
      padding: 0;
      border: 1px solid #878787;
      border-width: 0 1px 1px;
      border-radius: 0 0 4px 4px;
      background: #fff;
      text-align: center;
      padding: 40px 0;
      span {
        line-height: 22px;
        font-size: 14px;
      }
    }
    .btn {
      display: inline-block;
      color: #fff;
      margin: 0 10px;
      background-position: right -428px;
      padding: 0 5px 0 0;
      white-space: nowrap;
      height: 31px;
      line-height: 31px;
      margin-top: 30px;
      i {
        display: inline-block;
        width: 90px;
        color: #fff;
        background-position: 0 -387px;
        padding: 0 15px 0 20px;
        pointer-events: none;
        height: 31px;
        line-height: 31px;
        overflow: hidden;
        vertical-align: top;
        text-align: center;
        cursor: pointer;
      }
    }
  }
`;
